<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8"/>
        <meta http-equiv="X-UA-Compaatible" content="IE=edge"/>
        <meta name="viewport" content="width=device-width,initial-scale=1.0"/>
        <title>Document</title>
        <link rel="stylesheet" href="./css/reset.css"/>
        <link rel="stylesheet" href="./css/header.css"/>
        <link rel="stylesheet" href="./css/common.css"/>
        <link rel="stylesheet" href="./css/product-manage.css"/>
    </head>
    <body>
        <div class="app-header">
            <div class="header__main">
                <section>
                    <a class="section__logo"><img src="./images/logo.png" alt=""/></a>
                    <a>总览</a>
                    <a class="section__arrow">云产品</a>
                </section>
                <section>
                    <a class="section__search"><input type="text" placeholder="搜索你想要的内容..."><img src="./images/icon-search.png" alt=""></a>
                    <a class="section__wx"><img src="./images/icon-wx.png" alt=""><span>小程序</span></a>
                    <a class="section__email"><img src="./images/icon-mail.png" alt=""><span>14</span></a>
                    <a class="section__arrow">集团账号</a>
                    <a class="section__arrow">工具</a>
                    <a class="section__arrow">支持</a>
                    <a class="section__arrow">费用</a>
                    <a class="section__arrow section__user"><img src="./images/icon-user.png" alt=""></a>
                </section>             
            </div>
        </div>
        <div class="app-container">
            <div class="container__group">
                <div class="group__item active" ><span>产品管理</span></div>
                <div class="group__item " ><span>产品监控</span></div>
                <div class="group__item " ><span>产品运维</span></div>
            </div>
            <div class="container__main">
                <section>
                    <div class="app-card product-resources">
                        <header>产品资源<a>更多产品</a></header>

                        <main>
                            <div class="main_item">
                                <img src="./images/product-images/矩形(1).png" alt=""/>

                                <div class="item_info">
                                    <div class="item_face text-overflow">
                                        人脸识别
                                    </div>
                                    <div class="item_face2 text-overflow">
                                        精准稳定的人脸识别服务
                                    </div>
                                </div>
                            </div>
                            <div class="main_item">
                                <img src="./images/product-images/矩形(2).png" alt=""/>

                                <div class="item_info">
                                <div class="item_face text-overflow">
                                    人脸核身
                                </div>
                                <div class="item_face2 text-overflow">
                                    秒级确认身份真实性
                                </div>
                            </div>
                            </div>
                            <div class="main_item">
                                <img src="./images/product-images/矩形(3).png" alt=""/>

                                <div class="item_info">
                                <div class="item_face text-overflow">
                                    域名注册
                                </div>
                                <div class="item_face2 text-overflow">
                                    专业安全的域名服务
                                </div>
                            </div>
                            </div>
                            <div class="main_item">
                                <img src="./images/product-images/矩形(4).png" alt=""/>

                                <div class="item_info">
                                <div class="item_face text-overflow">
                                    证书监控 SSLPod
                                </div>
                                <div class="item_face2 text-overflow">
                                    安全评级管理
                                </div>
                            </div>
                            </div>
                            <div class="main_item">
                                <img src="./images/product-images/矩形(5).png" alt=""/>

                                <div class="item_info">
                                <div class="item_face text-overflow">
                                    物联网设备
                                </div>
                                <div class="item_face2 text-overflow">
                                    安全可靠的物联网设备
                                </div>
                            </div>
                            </div>
                            <div class="main_item">
                                <img src="./images/product-images/矩形(6).png" alt=""/>

                                <div class="item_info ">
                                <div class="item_face text-overflow">
                                    团队协同
                                </div>
                                <div class="item_face2 text-overflow">
                                    高效的团队协同平台
                                </div>
                            </div>
                            </div>
                            <div class="main_item">
                                <img src="./images/product-images/矩形(7).png" alt=""/>

                                <div class="item_info">
                                <div class="item_face text-overflow">
                                    金融专有云
                                </div>
                                <div class="item_face2 text-overflow">
                                    金融公有云环境版本
                                </div>
                            </div>
                            </div>
                            <div class="main_item">
                                <img src="./images/product-images/矩形(8).png" alt=""/>

                                <div class="item_info">
                                <div class="item_face text-overflow">
                                    数字峰会平台
                                </div>
                                <div class="item_face2 text-overflow">
                                    周期云峰会解决方案
                                </div>
                            </div>
                            </div>
                        </main>
                    </div>
                    <div class="app-card product-expenses">
                        <header>费用信息</header>
                        <main>
                            <section>
                                <div class="section_item">
                                    <div class="item_info">
                                        <div class="info_text">
                                            账户余额
                                        </div>
                                        <div class="info_price">
                                            <span>40.00</span>
                                            <span>元</span>
                                        </div>
                                        <button class="info_button active">
                                            <span>
                                                充值
                                            </span>
                                        </button>
                                    </div>
                                </div>
                                <div class="section_item">
                                    <div class="item_info">
                                        <div class="info_text">
                                            优惠钱
                                        </div>
                                        <div class="info_price">
                                            <span>10.00</span>
                                            <span>元</span>
                                        </div>
                                        <button class="info_button">
                                            <span>
                                                去使用
                                            </span>
                                        </button>
                                    </div>
                                </div>
                                <div class="section_item">
                                    <div class="item_info">
                                        <div class="info_text">
                                            可开发票
                                        </div>
                                        <div class="info_price">
                                            <span>196.00</span>
                                            <span>元</span>
                                        </div>
                                        <button class="info_button">
                                            <span>
                                                开票
                                            </span>
                                        </button>
                                    </div>
                                </div>  
                            </section>
                            <section>
                                <div class="section_title">
                                    历史订单
                                <div>
                                <div>
                                    <table class="section_table">
                                        <thead class="section_thead">
                                            <td>订单号</td>
                                            <td>产品名称</td>
                                            <td>金额</td>
                                            <td>交易时间</td>
                                            <td>交易状态</td>
                                            <td>支付方式</td>
                                        </thead>
                                        <tbody class="section_tbody">
                                            <tr>
                                                <td>CHN12934857757</td>
                                                <td>开通会员</td>
                                                <td>¥ 169</td>
                                                <td>2021/2/21 12:25</td>
                                                <td class="table_td">未支付</td>
                                                <td><button class="table_button">去支付</button></td>
                                            </tr>
                                            <tr>
                                                <td>CHN12934857753</td>
                                                <td>开通高级会员</td>
                                                <td>¥ 380</td>
                                                <td>2021/2/21 12:20</td>
                                                <td class="table_td table_td1">已支付</td>
                                                <td>微信</td>
                                            </tr>
                                            <tr> 
                                                <td>CHN12934857755</td>
                                                <td>扩充终端额度</td>
                                                <td>¥ 960</td>
                                                <td>2021/2/21 12:12</td>
                                                <td class="table_td table_td1">已支付</td>
                                                <td>微信</td>
                                            </tr>
                                            <tr class="section_tr">
                                                <td>CHN12934857752</td>
                                                <td>延长服务年限</td>
                                                <td>¥ 150</td>
                                                <td>2021/2/21 12:10</td>
                                                <td class="table_td table_td1">已支付</td>
                                                <td>微信</td>
                                            </tr>
                                        </tbody>
                                    </table>

                                </div>
                                <div class="section__pagination">
                                    <span>共 20 条</span>
                                    <div class="pagination__select"><span>10</span><img src="./images/product-manage/icon-select.png" alt="" /></div>
                                    <span class="pagination__size">条/页</span>
                                    <button><img src="./images/product-images/Page 1(1).png" alt="" /></button>
                                    <button class="active"><span>1</span></button>
                                    <button><span>2</span></button>
                                    <button><span>3</span></button>
                                    <button><span>...</span></button>
                                    <button><span>20</span></button>
                                    <button><img src="./images/product-images/Page 1.png" alt="" /></button>
                                    <span class="pagination__goto">前往</span>
                                    <input type="text" value="1" />
                                    <span class="pagination__page">页</span>
                                </div>
                            </section>
                        </main>
                    </div>
                    <div class="app-card product-help">
                        <header>帮助文档</header>
                        <main>
                        <section>
                            <div class="section__title">
                                <span class="text-overflow">使用 SSH 密钥登录还可以同时使用密码密钥登录</span>
                                <img src="./images/product-images/标签.png" alt="" />
                            </div>
                            <div class="section__title">
                                <span class="text-overflow">提交时提示“证件上的名称与域名所有者不一致” 如何处理？</span>
                                <img src="./images/product-images/标签.png" alt="" />
                            </div>
                            <div class="section__title">
                                <span class="text-overflow">域名实名认证和备案及账号实名认证有什么区别？</span>
                            </div>
                            <div class="section__title">
                                <span class="text-overflow">域名实名认证审核中是否可以修改信息呢？</span>
                            </div>
                            <div class="section__title">
                                <span class="text-overflow">实名认证失败的原因是什么？</span>
                                <img src="./images/product-images/标签(1).png" alt="" />
                            </div>
                        </section>
                        <section>
                            <div class="section__title">
                                <span class="text-overflow">域名什么情况下需要进行备案呢？ </span>
                                <img src="./images/product-images/标签(1).png" alt="" />
                            </div>
                            <div class="section__title">
                                <span class="text-overflow">是否需要备案的判断条件是域名还是 80 端口？</span>
                            </div>
                            <div class="section__title">
                                <span class="text-overflow">在微信无法播放视频，非微信情况下却可以播放的问题？</span>
                            </div>
                            <div class="section__title">
                                <span class="text-overflow">能否对视频做配音、亮度调节、画中画等编辑？</span>
                                <img src="./images/product-images/标签(1).png" alt="" />
                            </div>
                            <div class="section__title">
                                <span class="text-overflow">浏览器环境不支持播放时会有什么提示？</span>
                            </div>
                        </section>
                    </main>

                    <header>历史预览</header>
                    <main>

                    <section>
                        <div class="section__space">
                            <div class="section__title">
                                <img src="./images/product-images/说明1.png" alt="" />
                                <span class="text-overflow">如何获取云服务器的初始密码？</span>
                            </div>
                            <img src="./images/product-images/路径.png" alt="" />
                        </div>
                    </section>
                    <section>
                        <div class="section__space">
                            <div class="section__title">
                                <img src="./images/product-images/说明1.png" alt="" />
                                <span class="text-overflow">域名的价格是多少？</span>
                            </div>
                            <img src="./images/product-images/路径.png" alt="" />
                        </div>
                    </section>
                    <section>
                        <div class="section__space">
                            <div class="section__title">
                                <img src="./images/product-images/说明1.png" alt="" />
                                <span class="text-overflow">域名购买多年是否有优惠？</span>
                            </div>
                            <img src="./images/product-images/路径.png" alt="" />
                        </div>
                    </section>

                    </div>
                </section>
                <section>
                    <div class="app-card product-user">
                        <header><span></span><img src="./images/product-images/路径 2.png" alt="" /></header>

                        <main>

                            <img src="./images/product-images/编组 8.png" alt="" />
                            <div class="main__content">
                                <div class="content__code">CHN13384984900</div>
                                <div class="content__text">
                                    <span>实名认证</span>
                                    <span>已实名</span>
                                </div>
                            </div>
                            <div class="main__footer">
                                <section>
                                    <div class="section__name">用户数量</div>
                                    <div class="section__value">
                                        <span>40</span>
                                        <span>人</span>
                                    </div>
                                </section>
                                
                                <section>
                                    <div class="section__name">用户组数</div>
                                    <div class="section__value">
                                        <span>18</span>
                                        <span>组</span>
                                    </div>
                                </section>
                                <section>
                                    <div class="section__name">角色数量</div>
                                    <div class="section__value">
                                        <span>27</span>
                                        <span>个</span>
                                    </div>
                                </section>
                            </div>                            
                        </main>

                    </div>
                    <div class="app-card product-services">
                        <div class="services__content">
                            <img src="./images/product-images/形状(2).png" alt="" />
                            <span>为保障您的权益，请勿线下交易！90%的欺诈、纠纷、资金盗窃均由线下交易导致。</span>
                        </div>

                        <button>
                            <img src="./images/product-images/编组 29.png" alt="" />
                            <span>一键联系客服</span>
                        </button>
                    </div>
                    <div class="app-card product-news">
                        <header>最新发布</header>

                        <main>
                            <section>
                                <img src="./images/product-images/位图.png" alt="" />
                                <div class="section__info">
                                    <div class="info__title">服务网络，一致、可靠、透明的云原生应用通信网络管控基础平台</div>
                                    <div class="info__footer">
                                        <div class="footer__tag"><span>科技资讯</span></div>
                                        <span>2020-12-28</span>
                                    </div>
                                </div>
                            </section>
                            <section>
                                <img src="./images/product-images/位图(1).png" alt="" />
                                <div class="section__info">
                                    <div class="info__title">商机魔方通过从海量、复杂的数据中筛选出有效信息</div>
                                    <div class="info__footer">
                                        <div class="footer__tag"><span>论坛资讯</span></div>
                                        <span>2020-12-26</span>
                                    </div>
                                </div>
                            </section>
                            <section>
                                <img src="./images/product-images/位图(2).png" alt="" />
                                <div class="section__info">
                                    <div class="info__title">商机雷达通过从海量、复杂的数据中筛选有效信息</div>
                                    <div class="info__footer">
                                        <div class="footer__tag"><span>科技新闻</span></div>
                                        <span>2020-12-24</span>
                                    </div>
                                </div>
                            </section>
                        </main>

                        <footer>
                            <button><img src="./images/product-images/Page 1(1).png" alt="" /></button>
                            <button><img src="./images/product-images/Page 1.png" alt="" /></button>
                        </footer>

                    </div>
                </section>
            </div>
        </div>
    </body>
</html>